<script src="/parkinfo/js/jquery-1.7.2.min.js"></script>
<script src="/parkinfo/js/jquery.min.js"></script>
<link href="/parkinfo/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="/parkinfo/dist/css/AdminLTE.css">
<link rel="stylesheet" href="/parkinfo/dist/css/skins/skin-blue.min.css">
<script src="/parkinfo/angular/angular.min.js"></script>
<script src="/parkinfo/angular/angular-animate.min.js"></script>
<script src="/parkinfo/angular/angular-cookies.min.js"></script>
<script src="/parkinfo/angular/angular-ui-router.min.js"></script>
<script src="/parkinfo/angular/ocLazyLoad.min.js"></script>
<script src="/parkinfo/angular/ui-bootstrap-tpls.min.js"></script>
<link href="/parkinfo/datepicker/datepicker.css" rel="stylesheet"/>

<link href="/parkinfo/css/xx_list_admin.css" rel="stylesheet"/>
<script src="/parkinfo/js/utility.js"></script>
<script src="/parkinfo/js/bootstrap.min.js"></script>
<script src="/parkinfo/script/datepicker.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="/parkinfo/script/outsideParkStatusAdmin1.js?v=1.22"></script>
<!-- <script src="/parkinfo/script/outsideParkStatusAdmin2.js?v=1.1"></script> -->
<script type="text/javascript">
require.config({
	paths:{
		echarts:'http://echarts.baidu.com/build/dist'
	}
})
require(
	[
		'echarts',
		'echarts/chart/pie'
	],
	function(ec){
		var myChart=ec.init(document.getElementById('main'));
		
		var labelTop = {
			    normal : {
			        label : {
			            show : true,
			            position : 'center',
			            formatter : '{b}',
			            textStyle: {
			                baseline : 'bottom',
			                color:'#333'
			            }
			        },
			        labelLine : {
			            show : false
			        }
			    }
			};
			var labelFromatter = {
			    normal : {
			        label : {
			            formatter : function (params){
			                return 100 - params.value + '%'
			            },
			            textStyle: {
			                baseline : 'top'
			            }
			        }
			    },
			}
			var labelBottom = {
			    normal : {
			        color: '#ccc',
			        label : {
			            show : true,
			            position : 'center'
			        },
			        labelLine : {
			            show : false
			        }
			    },
			    emphasis: {
			        color: 'rgba(0,0,0,0)'
			    }
			};
			var radius = [40, 55];
			option = {
			    legend: {
			        x : '26%',
			        y : '80%',
			        
			        data:[] 
			    },
		
			    
			    series : [
			        {
			            type : 'pie',
			            center : ['30%', '40%'],
			            radius : radius,
			            x: '0%', // for funnel
			            itemStyle : labelFromatter,
			            data : [
			                {name:'other', value:46, itemStyle : labelBottom},
			                {name:'今日总收入', value:54,itemStyle : labelTop}
			            ]
			        },
			        {
			            type : 'pie',
			            center : ['50%', '40%'],
			            radius : radius,
			            x:'20%', // for funnel
			            itemStyle : labelFromatter,
			            data : [
			                {name:'other', value:56, itemStyle : labelBottom},
			                {name:'今日停车次数', value:44,itemStyle : labelTop}
			            ]
			        },
			        {
			            type : 'pie',
			            center : ['70%', '40%'],
			            radius : radius,
			            x:'40%', // for funnel
			            itemStyle : labelFromatter,
			            data : [
			                {name:'other', value:65, itemStyle : labelBottom},
			                {name:'总泊位数', value:35,itemStyle : labelTop}
			            ]
			        },
			        {
			            type : 'pie',
			            center : ['90%', '40%'],
			            radius : radius,
			            x:'60%', // for funnel
			            itemStyle : labelFromatter,
			            data : [
			                {name:'other', value:70, itemStyle : labelBottom},
			                {name:'泊位周转率', value:30,itemStyle : labelTop}
			            ]
			        }
			        
			    ]
			};
		myChart.setOption(option);
	}
)
</script>
<style>
	.clearfix:after {
            content: ".";
            width: 0;
            height: 0;
            visibility: hidden;
            display: block;
            clear: both;
            overflow: hidden;
        }

        .clearfix {
            zoom: 1;
            
        }

        ul {
            width:80%;
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            right: 5;
            margin-top: -30px;
            
        }

        ul li {
            float: left;
            width:25%;
            
        }
</style>
<div class="" ng-app="outsideParkStatusApp" ng-controller="outsideParkStatusCtrl">
    <section class="content-header">
        <h1>  <small></small></h1>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-3">
                <label class="control-label" >市</label>
                <select class="form-control" ng-options="zoneCenter.id as zoneCenter.name for zoneCenter in zoneCenters" ng-model="zoneCenterId" ng-change="getArea()"></select>
            </div>
            <div class="col-md-3">
                <label class="control-label" >区</label>
                <select class="form-control" ng-options="area.id as area.name for area in areas" ng-change="getStreets()" ng-model="areaId"></select>
            </div>
            <div class="col-md-3">
                <label class="control-label" >道路</label>
                <select class="form-control" ng-options="street.id as street.name for street in streets" ng-model="streetid" ng-change="getParks(streetid)"></select>
            </div>
            <div class="col-md-3">
                <label class="control-label" >停车场</label>
                <select class="form-control" ng-options="park.id as park.name for park in parks" ng-model="parkid" ng-change="selectPosdataByParkAndRange(parkid)"></select>
            </div>
        </div>
        <!-- <div class="xx-list">
            <ul class="float-fix">
                <li>
                    <p>
                        停车场名：
                    </p>
                    <span>{{selectedParkName|limitTo:9}}{{selectedParkName.length>9?'...':''}}</span>
                </li>
                <li>
                    <p>
                        停车场编号：
                    </p>
                    <span ng-bind="selectedParkNum"></span>
                </li>
                <li>
                    <p>
                        负责人姓名：
                    </p>
                    <span ng-bind="principalName"></span>
                </li>
                <li>
                    <p>
                        联系电话：
                    </p>
                    <span ng-bind="contactNumber"></span>
                </li>
            </ul>
            <ul class="float-fix">
                <li>
                    <p>
                        在线泊位数（个）：
                    </p>
                    <span ng-bind="carportsCount"></span>
                </li>
                <li >
                    <p>
                        在停车辆数（个）：
                    </p>
                    <span ng-bind="carportUsedCount"></span>
                </li>
                <li >
                    <p>
                        空余泊位数（个）：
                    </p>
                    <span ng-bind="carportUnusedCount"></span>
                </li>
                <li >
                    <p>
                        今日停车次数:
                    </p>
                    <span ng-bind="dayCarsCount"></span>
                </li>
            </ul>
            <ul class="float-fix">
                <li >
                    <p>
                        进场车辆数（个）：
                    </p>
                    <span ng-bind="carsInCount"></span>
                </li>
                <li >
                    <p>
                        离场车辆数（个）：
                    </p>
                    <span ng-bind="carsOutCount"></span>
                </li>
                <li >
                    <p>
                        泊位饱和度（%）：
                    </p>
                    <span ></span>
                </li>
                <li >
                    <p>
                        泊位周转率：
                    </p>
                    <span ng-bind="dayCarsCount/carportsCount|number:2"></span>
                </li>
            </ul>
            <ul class="float-fix">
                <li id="list30">
                    <p>
                        应收金额（元）：
                    </p>
                    <span ng-bind="dayChargeTotal"></span>
                </li>
                <li id="list31">
                    <p>
                        实收金额：
                    </p>
                    <span ng-bind="dayRealReceiveMoney"></span>
                </li>
                <li id="list32">
                    <p>
                        欠费/签收金额：
                    </p>
                    <span></span>
                </li>
                <li id="list33">
                    <p>
                        实收比例（%）：
                    </p>
                    <span></span>
                </li>
            </ul>
            <ul class="float-fix">
                <li id="list40">
                    <p>
                        现金支付（元）：
                    </p>
                    <span></span>
                </li>
                <li id="list41">
                    <p>
                        刷卡金额：
                    </p>
                    <span></span>
                </li>
                <li id="list42">
                    <p>
                        停车专卡刷卡金额（元）：
                    </p>
                    <span></span>
                </li>
                <li id="list43">
                    <p></p>
                    <span></span>
                </li>
            </ul>
        </div> -->

        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <!-- <div class="box-header">
                        <h3 class="box-title"></h3>
                    </div> --><!-- /.box-header -->
                    <div class="box-body">
                        <div id="chart-header">
                            <div class="row" >
                                <div class="col-md-3"  style="display:none">
                                    <div class="form-group">
                                        <select id="park-select" class="form-control" style="font-weight:bold">
                                            #foreach( $park in $parks)
                                            <option value=$park.id>$park.name</option>
                                            #end
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="date" class="control-label">日期</label>
                                        <input type="text" id='date' ng-model="date" ng-change="selectPosdataByParkAndRange()" class="form-control date">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row" style="padding-top:25px">
                        	<div class="img_count" style="position: absolute;float: right;margin-left: 80px;margin-top: 20px;">
                        			<img src="images/today_place.png" style="z-index:888;height: 100px;">
                        			<p>总订单7000条</p>
                        	</div>
                        	<div id="main" style="height:150px;width: 100%;"></div>
                        	<div class="content_ul" style="position: relative;width: 100%;">
								<ul class="clearfix">
								    <li style="text-align: center;">6000条</li>
								    <li style="text-align: center;">550条</li>
								    <li style="text-align: center;">30条</li>
								    <li style="text-align: center;">10条</li>
								</ul>
							</div>
<!--                             <div class="col-lg-3 col-xs-3"> -->
<!--                                 small box -->
<!--                                 <div class="small-box bg-aqua">
<!--                                     <div class="inner"> -->
<!--                                         <h3 ng-bind="dayRealReceiveMoney"></h3> -->

<!--                                     </div> -->
<!--                                     <div class="icon"> -->
<!--                                         <i class="ion ion-bag"></i> -->
<!--                                     </div> -->
<!--                                     <a href="#" class="small-box-footer" style="font-size:20;font-weight:bold">今日总收入&nbsp <i class="fa fa-arrow-circle-right"></i></a> -->
<!--                                 </div> --> 
<!--                             </div>./col -->
<!--                             <div class="col-lg-3 col-xs-3"> -->
<!--                                 small box -->
<!--                                 <div class="small-box bg-green">
<!--                                     <div class="inner"> -->
<!--                                         <h3 ng-bind="dayCarsCount">0</h3> -->

<!--                                     </div> -->
<!--                                     <div class="icon"> -->
<!--                                         <i class="ion ion-stats-bars"></i> -->
<!--                                     </div> -->
<!--                                     <a href="#" class="small-box-footer" style="font-size:20;font-weight:bold">今日停车次数&nbsp <i class="fa fa-arrow-circle-right"></i></a> -->
<!--                                 </div> -->
<!--                             </div>./col -->
<!--                             <div class="col-lg-3 col-xs-3"> -->
<!--                                 small box -->
<!--                                 <div class="small-box bg-yellow">
<!--                                     <div class="inner"> -->
<!--                                         <h3 ng-bind="carportsCount">0</h3> -->

<!--                                     </div> -->
<!--                                     <div class="icon"> -->
<!--                                         <i class="ion ion-person-add"></i> -->
<!--                                     </div> -->
<!--                                     <a href="#" class="small-box-footer" style="font-size:20;font-weight:bold">总泊位数&nbsp<i class="fa fa-arrow-circle-right"></i></a> -->
<!--                                 </div> -->
<!--                             </div>./col -->
<!--                             <div class="col-lg-3 col-xs-3"> -->
<!--                                 small box -->
<!--                                 <div class="small-box bg-red"> -->
<!--                                     <div class="inner"> -->
<!--                                         <h3 ng-bind="dayCarsCount/carportsCount|number:2">0</h3> -->

<!--                                     </div> -->
<!--                                     <div class="icon"> -->
<!--                                         <i class="ion ion-pie-graph"></i> -->
<!--                                     </div> -->
<!--                                     <a href="#" class="small-box-footer" style="font-size:20;font-weight:bold">泊位周转率&nbsp<i class="fa fa-arrow-circle-right"></i></a> -->
<!--                                 </div> -->
<!--                             </div>./col -->
                        </div>
                        

						<div class="row" style="padding-top:25px">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="parkMonth" class="control-label">按月份查看每日应收实收金额</label>
                                    <input type="text" ng-model="monthDate" id="parkMonth" class="form-control">
                                </div>
                            </div>
                               <div class="col-md-1">
                                     <div class="form-group" style="padding-top:25px">
                                        <button  type="button" class="btn btn-info" ng-click="getParkChargeByRange()" style="float:left">
                                            查看
                                        </button>
                                        </div>  </div>
                        </div>
                        <div class="row" >
                                <p ng-show="show1">正在数据查询,请稍等...</p>
                            <div style="height:400px;width:95%;padding-left:10px" id = "chart_park_period_charge"></div>
                        </div>

                        <div class="row" style="padding-top:25px">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="parkMonth2" class="control-label">按月份查看每日进出流量</label>
                                    <input type="text" ng-model="monthDate2"  id="parkMonth2" class="form-control">
                                </div>
                                </div>
                            <div class="col-md-1" style="padding-top:25px">
                                  
                                        <button  type="button" class="btn btn-info" ng-click="getParkRecordsCountByRange()" style="float:left">
                                            查看
                                        </button>
                                        </div>
                        </div>
                        <div class="row" >
                                <p ng-show="show2">正在数据查询,请稍等...</p>
                            <div style="height:400px;width:95%;padding-left:10px;" id = "chart_park_period_charge2"></div>
                        </div>
                        
                               <div class="row" style="padding-top:25px">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="parkMonth2" class="control-label">按月份查看每日收费车数量</label>
                                    <input type="text" ng-model="monthDate3"  id="parkMonth3" class="form-control">
                                </div>
                                </div>
                            <div class="col-md-1" style="padding-top:25px">
                                  
                                        <button  type="button" class="btn btn-info" ng-click="getByDayAndDateDiffNoOut()" style="float:left">
                                            查看
                                        </button>
                                        </div>
                        </div>
                        <div class="row" >
                            <p ng-show="show3">正在数据查询,请稍等...</p>
                            <div style="height:400px;width:95%;padding-left:10px;" id = "chart_park_period_charge3"></div>
                        </div>
                        
                        
                    </div>
    </section>

</div>